<template>
	<view>
		<view class="header">
			<image :src="'http://localhost:3000' + arr.img" mode=""></image>
		</view>
		<view class="qian">
			<view class="zuo">
				<view class="qian1">￥</view>
				<view class="qian2">{{arr.price}}</view>
				<del class="qian3">￥{{arr.market_price}}</del>
			</view>
			<view class=you>
				<view class="you1">
					<u-icon name="star" color="#f00"></u-icon>
				</view>
				<view class="shou">收藏</view>
			</view>
		</view>
		<view class="title">
			<view class="ti1">{{arr.goodsname}}</view>
			<view class="ti2">敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</view>
			<view class="ti3">11.11限时299元起</view>
		</view>
		<view class="dibu">
			<text class="d1">此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</text>
			<text class="d2">查看 > </text>
		</view>
		<view class="b"></view>
		<view class="sh">
			<text class="sh1">领劵</text>
			<view class="x">
				<text class="y1">￥300</text>
				<text class="y1">￥50</text>
				<text class="y1">￥10</text>
			</view>
		</view>
		<view class="sx">
			<text class="fen">分期</text>
			<view class="f">
				<text class="f1">可选3/6/12期</text>
				<text class="f2"> > </text>
			</view>
		</view>
		<view class="xxxxx">

		</view>
		<view class="bottom">

			<view class="left">
				<view class="">
					<image src="../../static/image/客服.png" mode=""></image>
					<view class="">
						客服
					</view>
				</view>
				<view class="">
					<image src="../../static/image/店铺.png" mode=""></image>
					<view class="">
						店铺
					</view>
				</view>
				<view class="">
					<image src="../../static/image/购物车.png" mode=""></image>
					<view class="">
						购物车
					</view>
				</view>
			</view>
			<view class="right">
				<view class="botton1" @click="add()">加入购物车</view>
				<view class="botton2">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCartadd
	} from '@/reuqust/api.js'
	import {
		getGoodsinfo,
	} from '@/reuqust/api.js'
	export default {
		data() {
			return {
				arr: []
			}
		},
		onLoad(options) {
			// console.log(options, '111');
			getGoodsinfo({
				id: options.id
			}).then(res => {
				console.log(res, '999');
				if (res.data.code == 200) {
					this.arr = res.data.list[0]
				}
				console.log(this.arr, '222');
			})
			// getGoodsinfo({
			// 	id: options.id
			// }).then(res => {
			// 	console.log(res, '000');
			// 	if (res.data.code == 200) {
			// 	this.arr = res.data.list
			// 	}
			// })
		},
		methods: {
			// 跳转到购物车
			add() {
				let uid = uni.getStorageSync('userinfo').uid;
				// let {uid,token}  = box;
				console.log(uni.getStorageSync('userinfo'), '222');
				console.log(this.arr.id,'@@@@@');
				getCartadd({
					uid: uid,
					goodsid: this.arr.id,
					num: 1
				}).then(res => {
					console.log(res, 'res');
					if (res.data.code == 200) {
						uni.reLaunch({
							url: '../cart/cart?'
						})
					}else{
						uni.showToast({
							title:'请登录账号',
							content:'请登录账号',
							success(res){
								if(res.confirm){
									uni.reLaunch({
										url:'../mine/mine'
									})
								}
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.header image {
		width: 750rpx;
		height: 750rpx;
	}

	.qian {
		display: flex;
		justify-content: space-between;

	}

	.zuo {
		display: flex;
		justify-content: space-between;
	}

	.zuo .qian1 {
		font-size: 20rpx;
		color: #FF6040;
		line-height: 16rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.zuo .qian2 {
		font-size: 60rpx;
		color: #FF6040;
		line-height: 32rpx;
	}

	.xxxxx {
		height: 150rpx;
	}

	.zuo .qian3 {
		font-size: 20rpx;
		color: #999999;
		line-height: 16rpx;
		margin-top: 20rpx;
	}

	.you .you1 {
		width: 60rpx;
		/* height: 0.2rpx; */
		display: flex;
		flex-direction: column-reverse;
		// margin-right: 20rpx;
		margin-left: 20rpx;
	}

	.you .shou {
		font-size: 20rpx;
		color: #FF6040;
		letter-spacing: 0;
		text-align: center;
		line-height: 20rpx;
	}

	.title .ti1 {
		font-size: 32rpx;
		color: #333333;
		line-height: 32rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.title .ti2 {
		font-size: 28rpx;
		color: #999999;
		line-height: 28rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.title .ti3 {
		width: 166rpx;
		height: 32rpx;
		text-align: center;
		background: #FF8066;
		margin-left: 20rpx;
		margin-top: 30rpx;
		font-size: 10rpx;
		color: #FFFFFF;
		line-height: 32rpx;

	}

	.dibu {
		width: 750rpx;
		height: 28rpx;
		display: flex;
		justify-content: space-between;
		background: #F2F2F2;
		margin-left: 20rpx;
	}

	.dibu .d1 {
		font-size: 20rpx;
		color: #999999;
		text-align: justify;
		line-height: 28rpx;
		margin-left: 10rpx;
	}

	.dibu .d2 {
		font-size: 10rpx;
		color: #FF6040;
		text-align: right;
		line-height: 28rpx;
	}

	.b {
		width: 750rpx;
		height: 28rpx;
		background: #F2F2F2;
		margin-top: 11rpx;
	}

	.sh {
		display: flex;
	}

	.sh .sh1 {
		width: 48rpx;
		height: 24rpx;
		font-size: 24rpx;
		color: #333333;
		line-height: 24rpx;
		margin-top: 40rpx;
		margin-left: 20rpx;
		margin-right: 40rpx;
	}

	.x {
		width: 640rpx;
		height: 90rpx;
		border-bottom: 0.01rpx solid #CCCCCC;
		display: flex;
	}

	.x .y1 {
		width: 78rpx;
		height: 32rpx;
		background: url(@/static/image/奖券.png) no-repeat;
		background-size: 100% 100%;
		text-align: center;
		line-height: 32rpx;
		font-size: 10rpx;
		margin-top: 40rpx;
	}



	.sx {
		display: flex;
	}

	.sx .fen {
		width: 48rpx;
		height: 24rpx;
		font-size: 24rpx;
		color: #333333;
		line-height: 24rpx;
		margin-left: 20rpx;
	}

	.f {
		width: 670rpx;
		display: flex;
		justify-content: space-between;
	}

	.f .f1 {
		font-size: 24rpx;
		color: #666666;
		line-height: 24rpx;
		margin-left: 48rpx;
	}

	.f .f2 {
		font-size: 20rpx;
	}

	.bottom image {
		width: 50rpx;
		height: 50rpx;
	}

	.bottom {
		width: 100%;
		display: flex;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		background: white;
	}

	.botton1 {
		width: 220rpx;
		height: 98rpx;
		background: #FFCC66;
		color: #663014;
		line-height: 80rpx;
		text-align: center;

	}

	.botton2 {
		width: 220rpx;
		height: 98rpx;
		background-color: #FF6040;
		color: white;
		line-height: 80rpx;
		text-align: center;
	}

	.left,
	.right {
		width: 50%;
		display: flex;
		justify-content: space-around;
	}

	.img image {
		width: 100%;
		height: 800rpx;
	}

	* {
		list-style: none;
	}
</style>
